<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title></title>
    <script src="../../../../../packages/x6/dist/x6.js"></script>
  </head>
  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root">
      <div id="container"></div>
    </div>
    <script>
      const graph = new X6.Graph({
        container: this.container,
        width: 800,
        height: 600,
        grid: {
          visible: true,
          type: 'doubleMesh',
          args: [
            {
              color: '#eee', // 主网格线颜色
              thickness: 1, // 主网格线宽度
            },
            {
              color: '#ddd', // 次网格线颜色
              thickness: 1, // 次网格线宽度
              factor: 4, // 主次网格线间隔
            },
          ],
        },
        background: {
          color: '#fcfcfc',
          image:
            'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
          opacity: 0.2,
          repeat: 'watermark',
          angle: 30,
        },
      })

    const source=  graph.addNode({
          x: 100,
          y: 100,
          width: 80,
          height: 40,
          label: 'Hello',
      })

      const target = graph.addNode({
          x: 360,
          y: 300,
          width: 80,
          height: 40,
          label: 'World',
        },)
        graph.addEdge({source,target})
    </script>
  </body>
</html>
